/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 1.1 封装函数 ===> 获取频道列表数据
async function setChannelList() {
  const { data } = await axios({ url: '/v1_0/channels' });
  const channelListStr = '<option value="" selected="">请选择文章频道</option>' + data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('');
  // 1.2 展示到下拉菜单中
  document.querySelector('.form-select').innerHTML = channelListStr;
}
setChannelList();


/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
// 2.1 准备标签结构和样式 ===> 在 html 和 css 文件中完成
// 2.2 选择文件并保存在 FormData
document.querySelector('.img-file').addEventListener('change', async e => {
  const file = e.target.files[0];
  // 创建 FormData 对象
  const fd = new FormData();
  fd.append('image', e.target.files[0]);
  // 2.3 单独上传图片并得到图片 URL 网址
  const res = await axios({ url: '/v1_0/upload', method: 'post', data: fd });
  const { url } = res.data;
  document.querySelector('.rounded').src = url;
  document.querySelector('.rounded').classList.add('show');
  document.querySelector('.place').classList.add('hide');
});
// 解决显示 img 元素后,无法再次点击图片
document.querySelector('.rounded').addEventListener('click', () => {
  // 调用这个元素的点击事件
  document.querySelector('.img-file').click();
});


/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerText !== '发布') {
    return;
  }
  // 3.1 基于 form-serialize 插件收集表单数据对象
  const artForm = document.querySelector('.art-form');
  const artFormData = serialize(artForm, { hash: true, empty: true });
  /**
   * 对表单数据的额外操作
   * 1.删除 id 属性
   * 2.添加 cover 对象  包括：type(封面类型) 和 images(图片地址)
   * 3.修改 channel_id 属性的数据类型为整数类型
  */
  delete artFormData.id;
  artFormData.cover = {
    type: 1,
    images: [document.querySelector('.rounded').src]
  };
  artFormData.channel_id = +artFormData.channel_id;
  console.log(artFormData);
  // 3.2 基于 axios 提交到服务器保存
  const res = await axios({ url: '/v1_0/mp/articles', method: 'post', data: artFormData });
  console.log(res);
  // 3.3 调用 Alert 警告框反馈结果给用户
  myAlert(true, '发布成功');
  // 3.4 重置表单并跳转到列表页
  artForm.reset();
  document.querySelector('.rounded').src = '';
  document.querySelector('.rounded').classList.remove('show');
  document.querySelector('.place').classList.remove('hide');
  editor.setHtml('');
  setTimeout(() => {
    location.href = '../content/index.html';
  }, 1500);
});


/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
// 4.1 页面跳转传参（URL 查询参数方式） ===> 已在 content/index.js 中完成
; (function () {
  // 4.2 发布文章页面接收参数判断（共用同一套表单）
  // console.log(location.search);   // ?id=c924cdbc-5a56-4013-8941-274068ec9c70
  const paramsStr = location.search;
  const params = new URLSearchParams(paramsStr);
  params.forEach(async (value, key) => {   // value：参数值    key：参数名
    // console.log(value,key);
    if (key === 'id') {   // 有 id 参数：证明有要编辑的文章 id 被传入过来
      document.querySelector('.title span').innerText = '修改文章';
      document.querySelector('.send').innerText = '修改';
      // 4.4 获取文章详情数据并回显表单
      const res = await axios({ url: `/v1_0/mp/articles/${value}` });
      // 组织仅仅需要的数据对象，为后续遍历回显到页面上作铺垫
      const dataObj = {
        channel_id: res.data.channel_id,
        title: res.data.title,
        rounded: res.data.cover.images[0],  // 封面图片
        content: res.data.content,
        id: res.data.id   // 当前编辑文章的 id 值 ==> 作用：为后续的修改文章后保存服务器时作铺垫
      };
      // 遍历数据对象属性,映射到页面元素上,实现快速赋值
      Object.keys(dataObj).forEach(key => {
        if (key === 'rounded') {
          if (dataObj[key]) {   // 有封面
            document.querySelector('.rounded').src = dataObj[key];
            document.querySelector('.rounded').classList.add('show');
            document.querySelector('.place').classList.add('hide');
          }
        } else if (key === 'content') {
          editor.setHtml(dataObj[key]);
        } else {
          document.querySelector(`[name=${key}]`).value = dataObj[key];
        }
      });
    }
  });
})();


/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
  // 5.1 判断按钮文字，区分业务（因为共用一套表单）
  if (e.target.innerText !== '修改') {
    return;
  }
  const artForm = document.querySelector('.art-form');
  const artFormData = serialize(artForm, { hash: true, empty: true });
  // 添加额外的数据配置项
  artFormData.cover = {
    type: document.querySelector('.rounded').src ? 1 : 0,   // 如果有值,则表示有图,传1,否则传0
    images: [document.querySelector('.rounded').src]
  };
  try {
    // 5.2 调用编辑文章接口，保存信息到服务器
    const res = await axios({
      url: `/v1_0/mp/articles/${artFormData.id}`,
      method: 'put',
      data: artFormData
    });
    myAlert(true, '修改文章成功');
  }catch(error){
    myAlert(false,error.response.data.message);
  }
});